<template>
  <div class="container">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="店铺名称" prop="shopName">
        <el-input v-model="ruleForm.shopName"></el-input>
      </el-form-item>
      <el-form-item label="银行账户" prop="bankAccount">
        <el-input v-model="ruleForm.bankAccount"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="telephone">
        <el-input v-model="ruleForm.telephone"></el-input>
      </el-form-item>
      <el-form-item label="营业执照">
        <el-upload
            action=""
            :on-change="handleChange1"
            :file-list="shopPic"
            list-type="picture"
            :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="身份证照片">
        <el-upload
            action=""
            :on-change="handleChange2"
            :file-list="idPic"
            list-type="picture"
            :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "businessRegister",
  data() {
    return {
      ruleForm: {
        shopName: '',
        bankAccount: '',
        telephone: ''
      },
      rules: {
        shopName: [
          { required: true, message: '请输入店铺名称', trigger: 'blur' },
          { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
        ],
        bankAccount: [
          { required: true, message: '请输入银行账户', trigger: 'blur' },
          { min: 16, max: 16, message: '长度为16个字符', trigger: 'blur' }
        ],
        telephone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { min: 8, max: 15, message: '长度在 8 到 15 个字符', trigger: 'blur' }
        ],
      },
      shopPic:[],
      idPic:[],
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let fd = new FormData()
          fd.append("shopName", this.ruleForm.shopName)
          fd.append("userId", JSON.parse(sessionStorage.getItem("userInfo")).id)
          fd.append("bankAccount", this.ruleForm.bankAccount)
          fd.append("telephone", this.ruleForm.telephone)
          fd.append("SPic", this.shopPic[0].raw)
          fd.append("IPic", this.idPic[0].raw)
          this.$axios.post('/uploadUi', fd).then(res => {
            this.$message.success("提交成功")
            this.resetForm("ruleForm")
          })
          this.addBank()
        } else {
          return false;
        }
      });
    },
    addBank(){
      this.$axios.post("/addBank", {
        bankAccount: this.ruleForm.bankAccount
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.shopPic = []
      this.idPic = []
    },
    handleChange1(file, fileList){
      this.shopPic = fileList.slice(-1)
    },
    handleChange2(file, fileList){
      this.idPic = fileList.slice(-1)
    },
  }
}
</script>

<style scoped>
.container{
  max-width: 500px;
  margin: 0 auto;
}
</style>